<template>
    <a-menu v-model="current"
            :mode="mode"
            class="rx-app-menu-box"
            :overflowedIndicator="overflowedIndicator"
            :openKeys.sync="extendKey"
    >
        <template v-for="menu of curMenus">
            <a-menu-item
                :key="menu[field]"
                v-if="!menu.children || menu.children.length == 0"
                class="rx-app-menu-item"
                @click="handleClick(menu)"
            >
                <my-icon :type="menu.icon" />
                <span>{{menu[label]}}</span>
            </a-menu-item>
            <rxAppSubMenu  v-else :menu-info="menu" :key="menu.key"  :menuClick="menuClick"/>
        </template>
    </a-menu>
</template>

<script>
import rxAppSubMenu from './rx-app-sub-menu'
import sysAppManager from "@/api/system/core/sysAppManager";
export default {
    name: "rx-app-menu",
    components:{
        rxAppSubMenu
    },
    props:{
        value:{},
        menus:{
            default:()=>[]
        },
        field:{
            default:'key'
        },
        label:{
            default:'title'
        },
        mode:{
            default:'horizontal'
        },
        menuClick:{},
        openKeys:{}
    },
    computed:{},
    created(){
        this.isUserManager();
    },
    data(){
        return {
            current:[],
            overflowedIndicator:()=>{
                return <div><my-icon type="iconx-kuandugensui" />{this.more}</div>
            },
            extendKey:[],
            curMenus:this.menus,
            more: this.$ti18('rxList.moreBtn','更多')
        }
    },
    methods:{
        handleClick(menu){
            this.menuClick && this.menuClick(menu);
        },
        isUserManager(){
            //超级管理员、平台管理员，拥有所有权限
            if(this.user && this.user.admin){
                this.isManage=true;
            }
            //是否为某应用的管理员
            let self_=this;
            // 加载当前用户的应用管理员权限
            sysAppManager.getManagerOfCurUser().then(res => {
                if(res.message=='admin'){
                    //超级管理员用户可以管理所有应用
                    self_.isManage=true;
                }else {
                    //循环匹配管理员权限数组
                    for(let auth of res.data){
                        if(auth.appId==self_.$route.query.appId){
                            self_.isManage=true;
                            break;
                        }
                    }
                    if (!self_.isManage){
                        this.curMenus=this.menus.filter(item=>item.key!="category")
                    }
                }
            });
        },
    },
    watch:{
        current:{
            handler(v){
                this.$emit('input',v);
            },
            deep:true
        },
        value:{
            handler(v){
                this.current = v ;
            },
            deep:true,
            immediate:true
        },
        openKeys:{
            handler(v){
                this.extendKey = v ;
            },
            deep:true,
            immediate: true
        },
        menus: {
          handler(v) {
            this.curMenus = this.menus
          },
          deep: true,
        }
    }
}
</script>

<style scoped>
.rx-app-menu-box:not(.ant-menu-horizontal) >>> .ant-menu-submenu-title{
    color: rgba(0, 0, 0, 0.65)!important;
}
.rx-app-menu-box {
    border-right-color: transparent;
}

.rx-app-menu-box:is(.ant-menu-horizontal) >>>  > .ant-menu-item:hover,
.rx-app-menu-box:is(.ant-menu-horizontal) >>>  > .ant-menu-submenu:hover,
.rx-app-menu-box:is(.ant-menu-horizontal) >>>  > .ant-menu-item-active,
.rx-app-menu-box:is(.ant-menu-horizontal) >>>  > .ant-menu-submenu-active,
.rx-app-menu-box:is(.ant-menu-horizontal) >>>  > .ant-menu-item-open,
.rx-app-menu-box:is(.ant-menu-horizontal) >>>  > .ant-menu-submenu-open,
.rx-app-menu-box:is(.ant-menu-horizontal) >>>  > .ant-menu-item-selected,
.rx-app-menu-box:is(.ant-menu-horizontal) >>>  > .ant-menu-submenu-selected{
    background-color: #125cd7;
    color: #fff;
}
body .rx-app-menu-box:is(.ant-menu-horizontal) >>> .ant-menu-submenu-title{
    color: #fff;
    margin-top: 0;
    border-bottom: 0!important;
}

</style>